Telegram Group & Telegram Channel
💻 UI дизайн для No-code разработчика: типографика

Совсем недавно мы рассказали о теории цвета в цифровом дизайне. Если вы пропустили нашу предыдущую рассылку, то советуем почитать пост на эту тему. А сегодня мы расскажем про типографику.

Главные принципы и советы по работе с типографикой в digital-проекте ⬇️

⭐️ Чтение в вебе и на мобилках отличается от чтения книг. Книги читаем построчно сверху вниз, в вебе текст читаем по Z-траектории — когда глаза скользят по веб-странице слева направо, потом делают скачок по диагонали налево, оттуда снова направо. Люди сканируют веб-страницы, так что надо давать то, за что взгляд сможет зацепиться. Поэтому важно уделять внимание вёрстке.

⭐️ Чтобы разнообразить вёрстку и увеличить «сканируемость» страницы, — дробите на абзацы, вводите подзаголовки, работайте с весом шрифтовой группы — увеличивайте и уменьшайте жирность для одного и того же шрифта.

⭐️ Не рекомендуется использовать в проекте более двух шрифтов. А лучше — взять один. Если берётся два шрифта, то они должны сочетаться. Подобрать шрифтовую пару можно, например, на Fontjoy, Typotheque, Mixfont и проч.

⭐️ Учитывайте уместность шрифта. Например, в SaaS-сервисе неуместно использовать рукописный, меловой шрифт. Он подойдёт, к примеру, проекту для школьников. В спортивном приложении странно будет смотреться курсивный шрифт — он лучше подойдёт для книжного приложения, и то для заголовков.

⭐️ Осторожно обращайтесь с декоративными шрифтами. Их избыток повысит когнитивную нагрузку на пользователя и создаст лишний шум.

⭐️ Заголовок — всегда больше основного текста. Подойдёт не просто увеличенный кегль (размер шрифта в пикселях), но и написание капсом или заглавный шрифт.

⭐️ Основной текст плохо читается капсом и курсивом. Капс и курсив уместны в заголовке.

⭐️ В заголовке следует увеличивать межбуквенное расстояние. В основном тексте — межстрочное.

⭐️ В вебе лучше делать более узкие колонки текста, увеличивая межстрочное расстояние. В мобилках текст можно растягивать на всю ширину экрана.

⭐️ Предпочтительный минимальный кегль для веба и приложений — 16рх, для Android — 12рх и для iOS — 11рх.



Конечно, это лишь малая часть информации о большом и сложном мире цифрового дизайна. Если вы хотите освоить все тонкости digital-дизайна, научиться делать красивые, эффективные и высокооплачиваемые IT-продукты в любых форматах, — тогда ждём на курсе «Профессия No-code разработчик», который стартует уже в четверг, 3 августа!

💰Стать высокооплачиваемым специалистом:
codebreakers.tech/profession



tg-me.com/code_breakers/579
Create:
Last Update:

💻 UI дизайн для No-code разработчика: типографика

Совсем недавно мы рассказали о теории цвета в цифровом дизайне. Если вы пропустили нашу предыдущую рассылку, то советуем почитать пост на эту тему. А сегодня мы расскажем про типографику.

Главные принципы и советы по работе с типографикой в digital-проекте ⬇️

⭐️ Чтение в вебе и на мобилках отличается от чтения книг. Книги читаем построчно сверху вниз, в вебе текст читаем по Z-траектории — когда глаза скользят по веб-странице слева направо, потом делают скачок по диагонали налево, оттуда снова направо. Люди сканируют веб-страницы, так что надо давать то, за что взгляд сможет зацепиться. Поэтому важно уделять внимание вёрстке.

⭐️ Чтобы разнообразить вёрстку и увеличить «сканируемость» страницы, — дробите на абзацы, вводите подзаголовки, работайте с весом шрифтовой группы — увеличивайте и уменьшайте жирность для одного и того же шрифта.

⭐️ Не рекомендуется использовать в проекте более двух шрифтов. А лучше — взять один. Если берётся два шрифта, то они должны сочетаться. Подобрать шрифтовую пару можно, например, на Fontjoy, Typotheque, Mixfont и проч.

⭐️ Учитывайте уместность шрифта. Например, в SaaS-сервисе неуместно использовать рукописный, меловой шрифт. Он подойдёт, к примеру, проекту для школьников. В спортивном приложении странно будет смотреться курсивный шрифт — он лучше подойдёт для книжного приложения, и то для заголовков.

⭐️ Осторожно обращайтесь с декоративными шрифтами. Их избыток повысит когнитивную нагрузку на пользователя и создаст лишний шум.

⭐️ Заголовок — всегда больше основного текста. Подойдёт не просто увеличенный кегль (размер шрифта в пикселях), но и написание капсом или заглавный шрифт.

⭐️ Основной текст плохо читается капсом и курсивом. Капс и курсив уместны в заголовке.

⭐️ В заголовке следует увеличивать межбуквенное расстояние. В основном тексте — межстрочное.

⭐️ В вебе лучше делать более узкие колонки текста, увеличивая межстрочное расстояние. В мобилках текст можно растягивать на всю ширину экрана.

⭐️ Предпочтительный минимальный кегль для веба и приложений — 16рх, для Android — 12рх и для iOS — 11рх.



Конечно, это лишь малая часть информации о большом и сложном мире цифрового дизайна. Если вы хотите освоить все тонкости digital-дизайна, научиться делать красивые, эффективные и высокооплачиваемые IT-продукты в любых форматах, — тогда ждём на курсе «Профессия No-code разработчик», который стартует уже в четверг, 3 августа!

💰Стать высокооплачиваемым специалистом:
codebreakers.tech/profession

BY Code Breakers | No-code solutions


Warning: Undefined variable $i in /var/www/tg-me/post.php on line 283

Share with your friend now:
tg-me.com/code_breakers/579

View MORE
Open in Telegram


Code Breakers | No code solutions Telegram | DID YOU KNOW?

Date: |

That strategy is the acquisition of a value-priced company by a growth company. Using the growth company's higher-priced stock for the acquisition can produce outsized revenue and earnings growth. Even better is the use of cash, particularly in a growth period when financial aggressiveness is accepted and even positively viewed.he key public rationale behind this strategy is synergy - the 1+1=3 view. In many cases, synergy does occur and is valuable. However, in other cases, particularly as the strategy gains popularity, it doesn't. Joining two different organizations, workforces and cultures is a challenge. Simply putting two separate organizations together necessarily creates disruptions and conflicts that can undermine both operations.

Code Breakers | No code solutions from ua


Telegram Code Breakers | No-code solutions
FROM USA